<template>
  <el-dialog :title="'级配曲线：' + matchCode" :visible.sync="visible" :close-on-click-modal="false" :close-on-press-escape="false" :before-close="doClose" width="1000px">
    <div id="lineChar"></div>
  </el-dialog>
</template>

<script>
import * as echarts from "echarts";
require("echarts/theme/macarons"); // echarts theme
import {
  getChartData
} from "@/api/bitumenMixingStation/productionQuality/qualityMonitor";
export default {
  data() {
    return {
      zoom: 1,
      visible: false,
      lineChar: null,
      matchCode: ''
    };
  },
  computed: {},
  mounted() {},
  methods: {
    /**
     * 关闭弹窗
     */
    doClose() {
      this.visible = false;
    },

    /**
     * 初始换弹窗
     */
    open(id) {
      this.visible = true;
      getChartData(id)
        .then((res) => {
          try {
            this.createChart(res.data);
          } catch (error) {}
        })
        .catch(() => {
          this.createChart(undefined);
        });
    },

    /**
     * 重置大小
     */
    resize() {
      if (null != this.lineChar) {
        this.$nextTick(() => {
          this.lineChar.resize();
        });
      }
    },

    /**
     * 创建图表
     */
    createChart(res) {
      // 渲染显示区域
      if (null == this.lineChar) {
        this.lineChar = echarts.init(document.getElementById('lineChar'));
      } else {
        this.lineChar.clear();
      }

      // 判断需要显示的筛孔
      let matchType = {};
      let sieveData = {};
      let matchThreshold = {};
      let data = {};
      let match = {};
      if (!!res) {
        if (!!res.match) {
          match = res.match;
        }
        if (!!res.data) {
          data = res.data;
          this.matchCode = data.matchCode;
        }
        if (!!res.asphaltMatchType) {
          matchType = res.asphaltMatchType;
        }
        if (!!res.sieveData) {
          sieveData = res.sieveData;
        }
        if (!!res.matchThreshold) {
          matchThreshold = res.matchThreshold;
        }
      }

      // 折线图数据
      let xData = [0];
      let minData = [undefined];
      let maxData = [undefined];
      let relData = [undefined];
      matchType.sieveArray = JSON.parse(matchType.sieveArray || '')
      if (!!matchType.sieveArray) {
        matchType.sieveArray.forEach((item) => {
          xData.push(item);

          let code = item.toString().replace('.', 'd');
          minData.push(matchThreshold['sieve' + code + 'min']);
          maxData.push(matchThreshold['sieve' + code + 'max']);
          relData.push(sieveData['sieve' + code]);
        });
      }

      // 获取油石比仪表盘数据
      let value = data.asphaltAggregateRatio;
      let startValue = 0;
      let endValue = value;
      let minValue = 0;
      let maxValue = 0;
      let min;
      let max;
      if (!!match.asphaltAggregateRatio) {
        let base = match.asphaltAggregateRatio;
        let error = match.asphaltAggregateError;
        startValue = base - 2 * error;
        endValue = base + 2 * error;
        max = base + error;
        min = base - error;

        if (value > endValue) {
          endValue = value;
          startValue = min - (value - max);
        } else if (value < startValue) {
          startValue = value;
          endValue = min - value + max;
        }

        startValue = Math.floor(startValue * 10) / 10;
        endValue = Math.floor(endValue * 10) / 10;
        if (startValue != endValue) {
          minValue = (min - startValue) / (endValue - startValue);
          minValue = Math.floor(minValue * 100) / 100;

          maxValue = (max - startValue) / (endValue - startValue);
          maxValue = Math.floor(maxValue * 100) / 100;
        }
      }
      let gauge1 = this.getGauge('油石比', value, startValue, endValue, minValue, maxValue, '36%', ['20%', '32%']);

      // 获取温度仪表盘数据
      value = data.dischargeTemperature;
      startValue = 0;
      endValue = value;
      minValue = 0;
      maxValue = 0;
      min = match.temperatureMin;
      max = match.temperatureMax;
      console.log(min, max);
      if (!!min && !!max) {
        let error = (max - min) / 2;
        endValue = max + error;
        startValue = min - error;

        if (value > endValue) {
          endValue = value;
          startValue = min - (value - max);
        } else if (value < startValue) {
          startValue = value;
          endValue = min - value + max;
        }

        minValue = min / endValue;
        maxValue = max / endValue;

        startValue = Math.floor(startValue * 10) / 10;
        endValue = Math.floor(endValue * 10) / 10;
        if (startValue != endValue) {
          minValue = (min - startValue) / (endValue - startValue);
          minValue = Math.floor(minValue * 100) / 100;

          maxValue = (max - startValue) / (endValue - startValue);
          maxValue = Math.floor(maxValue * 100) / 100;
        }
      }
      let gauge2 = this.getGauge('温度', value, startValue, endValue, minValue, maxValue, '36%', ['80%', '68%']);

      // 绘制图表
      let option = {
        legend: {
          data: ['生产级配', '施工上限', '施工下限'],
          right: 80
        },
        tooltip: {
          trigger: 'axis',
          show: true
        },
        xAxis: {
          name: '筛孔尺寸',
          nameTextStyle: {
            padding: [15, 0, 0, 0] // 四个数字分别为上右下左与原位置距离
          },
          data: xData,
          boundaryGap: false,
          axisLine: { onZero: true },
          splitLine: { show: false },
          splitArea: { show: false }
        },
        yAxis: {
          type: 'value',
          name: '通过率%'
        },
        grid: {
          top: 60,
          bottom: 40,
          left: 80,
          right: 80
        },
        series: [
          {
            name: '生产级配',
            type: 'line',
            label: {
              show: true
            },
            data: relData,
            itemStyle: {
              // normal: {
              //   color: '#409eff'
              // }
            }
          },
          {
            name: '施工下限',
            type: 'line',
            data: minData,
            label: {
              show: true
            },
            itemStyle: {
              // normal: {
              //   color: '#F3637C',
              //   lineStyle: {
              //     type: 'dotted' //'dotted'虚线 'solid'实线
              //   }
              // }
            }
          },
          {
            name: '施工上限',
            type: 'line',
            data: maxData,
            label: {
              show: true
            },
            itemStyle: {
              // normal: {
              //   color: '#F3637C',
              //   lineStyle: {
              //     type: 'dotted' //'dotted'虚线 'solid'实线
              //   }
              // }
            }
          },
          gauge1,
          gauge2
        ]
      };

      this.lineChar.setOption(option);
    },

    /**
     * 获取仪表盘数据
     */
    getGauge(title, value, startValue, endValue, minValue, maxValue, radius, center) {
      return {
        name: title,
        type: 'gauge',
        radius: radius,
        center: center,
        min: startValue,
        max: endValue,
        detail: {
          valueAnimation: true,
          fontSize: 14
        },
        title: {
          show: true,
          fontSize: 12,
          offsetCenter: [0, '-30%'],
          color: '#000'
        },
        pointer: {
          show: true,
          length: '80%', //指针长度
          radius: '50%',
          width: 1 //指针粗细
        },
        markLine: {
          precision: 2
        },
        axisTick: {
          //刻度
          show: true,
          splitNumber: 10,
          lineStyle: {
            width: 1
          },
          length: 3
        },
        splitLine: {
          show: false,
          length: 0,
          lineStyle: {
            color: '#233446'
          }
        },
        axisLabel: {
          show: true,
          distance: 6,
          fontSize: 10,
          formatter: (params) => {
            return Math.floor(params * 10) / 10;
          }
        },
        axisLine: {
          lineStyle: {
            width: 5,
            color: [
              [minValue, '#f3637c'],
              [maxValue, '#008000'],
              [1, '#f3637c']
            ]
          }
        },
        data: [
          {
            value: value,
            name: title,
            itemStyle: {
              color: '#07182e'
            },
            textStyle: {
              fontSize: 20
            }
          }
        ]
      };
    }
  }
};
</script>

<style scoped>
#lineChar {
  height: 28.571429rem;
  width: 100%;
}
</style>